<!-- 抵押金额告警列表 -->
<template>
	<card :cardHeight="cardHeight" noMore>
		<div slot="cardtitle">
			<div class="flex flex-pack-justify flex-align-center">
				<span>
					<span>抵押金额告警</span>
					<i class="alarmnum">{{ total }}</i>
				</span>
				<a-tooltip placement="bottomLeft" style="margin-left: 20px">
					<template slot="title">
						<span>请及时抵押牛只或还款</span>
					</template>
					<img src="/que.png" alt="" srcset="" />
				</a-tooltip>
			</div>
		</div>
		<div style="margin: 0 18px; height: 100%">
			<dv-scroll-board class="dv-scr-board" :config="config" style="color: #24292e" ref="scrollBoard" />
		</div>
	</card>
</template>

<script>
import StatisticsMixins from '../StatisticsMixins';
import { mortgageapi } from '@/api/index.js';

export default {
	mixins: [StatisticsMixins],
	data() {
		return {
			total: 0,
			config: {
				header: ['#', '农场名称', '抵押金额(元)', '用信金额(元)'],
				data: [],
				rowNum: 8, //表格行数
				headerHeight: 35,
				headerBGC: '#F2F3F5', //表头
				oddRowBGC: '#fff', //奇数行
				evenRowBGC: '#fff', //偶数行
				index: false,
				columnWidth: [50],
				align: ['left', 'left', 'left', 'right']
			}
		};
	},
	watch: {
		cardHeight(newV, oldV) {
			this.config = {
				...this.config,
				rowNum: newV > 400 ? 8 : 6
			};
		}
	},
	methods: {
		getInfo() {
			this.$postAction(mortgageapi.echartsUrl.getWarnList + '?orgId=' + this.globalOrgId).then(da => {
				if (da.code == 1) {
					let list = da.data;
					let data = [];
					this.total = da.data.length || 0;
					list.forEach((item, index) => {
						data.push([
							index + 1,
							'<span title="' + item.deptName + '">' + item.deptName + '</span>',
							'<span class="red" title="' +
								item.pledgeCost +
								'">' +
								this.priceFormat(item.pledgeCost > 1e4 ? this.priceWan(item.pledgeCost) : item.pledgeCost, 2) +
								(item.pledgeCost > 1e4 ? '万' : '') +
								'</span>',
							'<span title="' +
								item.useCost +
								'">' +
								this.priceFormat(item.useCost > 1e4 ? this.priceWan(item.useCost) : item.useCost, 2) +
								(item.useCost > 1e4 ? '万' : '') +
								'</span>'
						]);
					});

					this.config = {
						...this.config,
						carousel: da.total - 20 > 0 ? 'page' : 'single',
						data: [...data]
					};
				}
			});
		}
	}
};
</script>

<style>
.red {
	color: #ff0000;
}
.alarmnum {
	color: #ff355e;
	font-size: 16px;
	background: #ffdbe3;
	border-radius: 9px;
	padding: 0 12px;
	height: 18px;
	font-style: normal;
	margin-left: 8px;
}
</style>
